<template>
	<view>
		<view class="content-top" v-for="(item,index) in historyList" :key="index" @click="tapDatil(item.postId)">
			<view class="title-content">
				<view class="title">
					<image src="../../static/images/icon/suTitle01.png"></image>
					<!-- <image :src="'http://127.0.0.1:8080' + item.avatar"></image> -->
					<!-- <view>{{item.userName}}</view> -->
					<view>{{item.title}}</view>
				</view>
				<view class="content">
					<view>{{ truncateContent(item.content) }}</view>
					<!-- <view class="content-image" v-show="item.imgUrl && item.imgUrl.length >0">
						<image :src="item.imgUrl[0]"></image>
					</view> -->
				</view>
			</view>
			<view class="name-tiem">
				<view class="name">{{item.nickName}}</view>
				<view>{{item.okCount}} 点赞</view>
				<view>{{item.commentCount}} 评论</view>
				<view class="time">浏览{{item.browseTime}}</view>
			</view>
			<!-- <up-line></up-line> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getUser
	} from '@/utils/auth'
	import {
		listSchedule
	} from '@/api/schedule.js'
	//取出当前登陆人的userid，如果被关注用户的id等于当前登陆人的id，则不显示关注字眼
	const userid = getUser()
	//定义数组列表，循环接口数据
	const historyList = ref([])
	//调用生命周期onMounted，打开页面显示浏览记录
	onMounted(() => {
		listSchedule({
			userId: userid
		}).then((res) => {
			// console.log(res.rows, '浏览记录列表')
			//处理图片、视频信息
			for (let i = 0; i < res.rows.length; i++) {
				if (res.rows[i].imgUrl) {
					res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
				}
				if (res.rows[i].videoUrl) {
					res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
				}
			}
			historyList.value = res.rows
			console.log(historyList.value, 'historyList.value')
			// console.log(typeof historyList.value.map(item => item.imgUrl), '666')
			// console.log(historyList.value[0].imgUrl.length)
		})
	})
	const truncateContent = (content) => {
		console.log(typeof content, '999')
		if (typeof content === "string") {
			return content.length > 30 ? content.slice(0, 15) + '...' : content;
		}else{
			return content
		}

	};
	//点击每一条浏览记录触发
	const tapDatil = ((id) => {
		uni.navigateTo({
			url: '/pages/postDetail/index?data=' + id
		})
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.content-top {
		padding: 15rpx;
		margin: 5rpx 0rpx 10rpx;
		background-color: #fff;

		.title-content {
			// font-size: 30rpx;

			.title {
				display: flex;
				align-items: center;
				padding: 15rpx;
				font-size: 30rpx;
				font-weight: 600;

				image {
					margin-right: 15rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.content {
				display: flex;
				justify-content: space-between;

				view {
					// padding: 15rpx 0rpx 15rpx 0rpx;
					margin: auto 0rpx;
				}

				image {
					width: 200rpx;
					height: 100rpx;
				}
			}
		}

		.name-tiem {
			margin: 15rpx auto;
			display: flex;
			justify-content: space-between;

			view {
				color: #a9a9a9;
			}
		}
	}
</style>